import React, {useState} from "react";
import {
  PageContainer,
} from '@ant-design/pro-components';
import {Button, DatePicker, Form, Input, Select} from "antd";
import { Checkbox } from 'antd';
import type { GetProp } from 'antd';
import JxModal from './jxModal'
import {getFormatDate} from "@/utils";
import Left from './left'
import Right from './right'
import ZfModal from './zfModal'
type LayoutType = Parameters<typeof Form>[0]['layout'];
const { RangePicker } = DatePicker;
const Index:React.FC = () => {
  let ChildRef = React.createRef();
  let ChildRef2 = React.createRef();
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState<LayoutType>('inline');

  const [defaultValue, setDefaultValue] = useState<any>(getFormatDate(1))
  const plainOptions = ['门诊', '住院', '体检'];
  const onFormLayoutChange = ({ layout }: { layout: LayoutType }) => {
    setFormLayout(layout);
  };



  const handleChange = (value: string) => {
    const fT = getFormatDate(value)
    setDefaultValue(fT)
  };

  const openRef = () => {
    ChildRef.current.showModal()
  }

  const openRef2 = () => {
    ChildRef2.current.showModal()
  }

  return(<PageContainer>
    <Form
      layout={formLayout}
      form={form}
      initialValues={{ layout: formLayout }}
      onValuesChange={onFormLayoutChange}
      style={{ maxWidth: formLayout === 'inline' ? 'none' : 600 }}
    >
      <Form.Item style={{marginBottom: '6px'}} label="">
        <div style={{display: 'flex',}}>
          <Select
            defaultValue="1"
            style={{ width: 120 }}
            onChange={handleChange}
            options={[
              { value: '1', label: '今天' },
              { value: '2', label: '昨天' },
              { value: '3', label: '本月' },
              { value: '4', label: '上月' },
              { value: '5', label: '今年' },
            ]}
          />
          <RangePicker value={defaultValue} />
        </div>
      </Form.Item>
      <Form.Item style={{marginBottom: '6px'}} label="关键字">
        <Checkbox.Group options={plainOptions} defaultValue={['门诊']} />
      </Form.Item>
      <Form.Item style={{marginBottom: '6px'}} label="样本状态">
        <Select
          defaultValue="1"
          style={{ width: 120 }}
          options={[
            { value: '1', label: '状态1' },
            { value: '2', label: '状态2' },
            { value: '3', label: '状态3' },
            { value: '4', label: '状态4' },
            { value: '5', label: '状态5' },
          ]}
        />
      </Form.Item>
      <Form.Item style={{marginBottom: '6px'}} label="患者">
        <Input placeholder="请输入患者" />
      </Form.Item>

      <Form.Item style={{marginBottom: '6px'}}>
        <Button type="primary">搜索</Button>
      </Form.Item>
    </Form>

    <div style={{display: "flex",justifyContent: "space-between"}}>
      <div style={{display: "flex",lineHeight: '32px'}}><div style={{width: '200PX'}}>样本核收  扫描条码</div> <Input style={{marginLeft: '6px'}} placeholder="请输入条码" /></div>
      <div>
        <Button type="primary" onClick={openRef}>拒签</Button>
        <Button type="primary" style={{marginLeft: '6px'}} onClick={openRef2}>作废</Button>
      </div>
    </div>

    <div style={{display: 'flex',marginTop: '10px'}}>
      <div style={{width: '60%'}}>
        <Left />
      </div>
      <div style={{width: '40%'}}>
        <Right />
      </div>
    </div>

    <JxModal onRef={ChildRef}/>
    <ZfModal onRef={ChildRef2} />
    </PageContainer>)
}

export default Index;
